<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./art-template(1).js"></script>
</head>

<body>
    <div class="box">

    </div>
    <!-- 
        使用script 定义一个模板
        在模板可以接收html语法和js语法
        type='text/html'

        推荐 在一个模板中只有一个最外层标签

        在模板中使用{{}} 包裹js代码

     -->
    <script id="con" type="text/html">
        <div>
             <p>编写标签</p>
             <p title={{name}}>{{name}}</p>
             <p title='xxxxage'>{{age}}</p>
             {{if tab == 'ask'}}
             <span>分享</span>
             {{else if tab == 'quest'}}
                <span>问答</span>
                {{else}} 
                <span>找不到啊</span>
                {{/if}}    
                <ul>
                    {{each data as item}}
                    <li>
                        <h3>{{item.name}}</h3>
                    </li>
                    {{/each}}
                </ul>        
                <ul>
                    {{each arr as item}}
                    <li>
                        {{item}}
                    </li>
                    {{/each}}
                </ul>
        </div>
        
     </script>
    <script>
        var res = {
            name: 'lili',
            age: 18,
            tab: '你好aaaaa tab',
            data: [{
                name: 'aaa1'
            }, {
                name: 'bbb2'
            }, {
                name: 'ccc3'
            }],
            arr: ['a', 'b', 'c']
        }
        /* 
        template() 模板与数据结合 返回一个解析后的模板字符串
        参数1是模板的id
        参数2是一个对象 在模板中可以直接只用对象直系属性
        */
        var str = template('con', res);
        console.log(str); // 得到解析后的字符串
        document.querySelector('.box').innerHTML = str;
    </script>
</body>

</html>